<template>
  <div>
    <!-- <demo></demo>
    <p>欢迎使用 自义定cli1</p>
    <div id="number"></div>
    <button @click="fn_btn(123, $event)">点击</button> -->
    <!-- 123 -->
    <button @click="des">点击</button>
    {{ this.time }}
    <formBox ref="form"></formBox>
    <input type="file" ref="file" />
    <img src="http://localhost:3000/public/lvye.jpg" alt="" srcset="" />
    <padBox></padBox>
    <!-- {{ value }}
    <c-input :value="value" @input="value = $event"></c-input> -->
  </div>
</template>
<script>
import demo from "components/demo.vue";
// import { CountUp } from "countup.js";
import _ from "lodash";
import formBox from "./form.vue";
import cInput from "./input.vue";
import http from "@/http/index.js";
import padBox from "components/pdf/index.vue";
import dayjs from "dayjs";
export default {
  components: {
    demo,
    formBox,
    cInput,
    padBox
  },
  data() {
    return {
      fn_btn: "",
      value: "2",
      time: ""
    };
  },
  created() {
    this.fn_btn = _.debounce(this.btn, 2000);
    console.log("ssssss");
    let b = new Date().getTime();
    let c = setInterval(() => {
      let a = Math.ceil((new Date() - b) / 1000);
      var h = parseInt(a / 3600);
      var m = parseInt((a % 3600) / 60);
      var s = (a % 3600) % 60;
      this.time = h + "小时" + m + "分" + s + "秒";
      if (a === 10) {
        clearInterval(c);
      }
    }, 1000);
    http({
      url: "/user/getList",
      method: "get",
      params: {
        size: 1,
        page: 5
      }
    });
  },
  mounted() {
    // var numAnim = new CountUp("number", 2000, {
    //   duration: 3,
    //   enableScrollSpy: true,
    // });
    // numAnim.start();
    let file = this.$refs.file;
    file.onchange = function(e) {
      console.log(e);
      let form = new FormData();
      form.append("file", e.target.files[0]);
      http({
        url: "/file/execl",
        method: "post",
        data: form
      });
    };
    // let http = axios.create({
    //   baseURL: "/dev-api",
    // });
    // http({
    //   url: "/list",
    // });
  },
  methods: {
    btn(msg, e) {
      console.log(123, msg, e);
    },
    des() {
      this.$refs.form.$destroy();
    }
  }
};
</script>
<style lang="scss">
body {
  background: rgb(174, 228, 228);
  font-size: 26px;
  // color: white;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // height: 100vh;
}
$color: rgb(100, 228, 153);

p {
  background-color: $color;
  display: flex;
  align-items: center;
}
</style>
